<template>
  <view>
    <view class="form-container">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelPosition="top">
        <view class="hidden-title">交接班信息</view>
        <cu-cell-group>
          <uni-forms-item name="handoverTime">
            <cu-cell
              title="交接班时间"
              required
              link
              placeholder="选择时间"
              :description="formData.handoverTime"
              @click="showhandoverTimePicker()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="itemId">
            <cu-cell
              title="排班事项"
              required
              link
              placeholder="选择排班事项"
              :description="formData.itemName"
              @click="handleItemClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="handoverClassId">
            <cu-cell
              title="交班班次"
              required
              link
              placeholder="选择班次"
              :description="formData.handoverClassName"
              @click="showHandoverClassSelector()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="handoverUserId">
            <cu-cell
              title="交班班长"
              required
              link
              placeholder="请选择"
              :description="formData.handoverUserName"
              @click="showHanderOverUserSelector()"
            ></cu-cell>
            <!-- <CuUserSelector label="交班班长" placeholder="选择人员" v-model="formData.handoverUserId" required /> -->
          </uni-forms-item>
          <uni-forms-item name="takeoverClassId">
            <cu-cell
              title="接班班次"
              required
              link
              placeholder="选择班次"
              :description="formData.takeoverClassName"
              @click="showTakeOverClassSelector()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="takeoverDeptId">
            <cu-cell
              title="接班班组"
              required
              link
              placeholder="选择班组"
              :description="formData.takeoverDeptName"
              @click="handleDeptClick()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="takeoverUserId">
            <cu-cell
              title="接班班长"
              required
              link
              placeholder="请选择"
              :description="formData.takeoverUserName"
              @click="showTakeOverUserSelector()"
            ></cu-cell>
            <!-- <CuUserSelector label="接班班长" placeholder="选择人员" v-model="formData.takeoverUserId" required /> -->
          </uni-forms-item>
        </cu-cell-group>
        <view class="hidden-title">交班参与人员</view>
        <cu-cell-group>
          <uni-forms-item name="handoverSafetyAndEnvironmentUserId">
            <cu-cell
              title="安全主办"
              required
              link
              placeholder="请选择"
              :description="formData.handoverSafetyAndEnvironmentUserName"
              @click="showHandoverSAESelector()"
            ></cu-cell>
          </uni-forms-item>
          <uni-forms-item name="handoverSyntheticalUserId">
            <cu-cell
              title="综合主办"
              required
              link
              placeholder="请选择"
              :description="formData.handoverSyntheticalUserName"
              @click="showHandoverSyntheticalSelector()"
            ></cu-cell>
            <!-- 	<CuUserSelector label="综合主办" placeholder="选择人员" v-model="formData.handoverSyntheticalUserId"
							required /> -->
          </uni-forms-item>
          <uni-forms-item name="handoverBuildUserId">
            <cu-cell
              title="生产主办"
              required
              link
              placeholder="请选择"
              :description="formData.handoverBuildUserName"
              @click="showHandoverBuildSelector()"
            ></cu-cell>
            <!-- <CuUserSelector label="生产主办" placeholder="选择人员" v-model="formData.handoverBuildUserId"
							required /> -->
          </uni-forms-item>
          <uni-forms-item name="handoverEquipmentUserId">
            <cu-cell
              title="设备主办"
              required
              link
              placeholder="请选择"
              :description="formData.handoverEquipmentUserName"
              @click="showHandoverEquipmentSelector()"
            ></cu-cell>
            <!-- 	<CuUserSelector label="设备主办" placeholder="选择人员" v-model="formData.handoverEquipmentUserId"
							required /> -->
          </uni-forms-item>
          <uni-forms-item name="mainOperatorUser">
            <CuUserSelector
              :dept-id="formData.handoverDeptId"
              label="当班主操"
              placeholder="选择人员"
              ref="mainOperatorUserSelector"
              v-model="formData.mainOperatorUser"
              multiple
              required
            />
          </uni-forms-item>
          <uni-forms-item name="ipqcUserId">
            <cu-cell
              title="当班巡检"
              required
              link
              placeholder="请选择"
              :description="formData.ipqcUserName"
              @click="showHandoverIpqcSelector()"
            ></cu-cell>
            <!-- <CuUserSelector label="当班巡检" placeholder="选择人员" v-model="formData.ipqcUserId" required /> -->
          </uni-forms-item>
          <uni-forms-item name="handoverOtherUser">
            <CuUserSelector
              :dept-id="formData.handoverDeptId"
              label="其他参与人员"
              placeholder="选择人员"
              v-model="formData.handoverOtherUser"
              multiple
            />
          </uni-forms-item>
        </cu-cell-group>
        <view class="submit" @click="handleSubmit">完成</view>
      </uni-forms>
    </view>
    <CuDateTimePicker ref="meegtingTimePicker" @change="handoverTimePickerChange" />
    <!-- <CuShiftRuleSelect ref="shiftRuleSelectRef" :id="formData.takeoverDeptId"
			@confirm="handleShiftRuleSelectConfirm" /> -->
    <!-- <dept-selector ref="deptSelectorRef" @change="onDeptSelectorChange"></dept-selector> -->
    <item-selector
      ref="itemSelectorRef"
      @confirm="onItemSelectorChange"
      title="选择排班事项"
      :date="formData.handoverTime"
    ></item-selector>
    <handover-class-selector
      ref="handoverClassSelectorRef"
      @confirm="onHandoverClassSelectorChange"
      title="选择交班班次"
      :date="formData.handoverTime"
      :item-id="formData.itemId"
      :exclude-class-ids="scheduledClassList"
    ></handover-class-selector>
    <user-selector
      ref="handoverUserSelectorRef"
      @change="handoverUserSelectorChange"
      :dept-id="formData.handoverDeptId"
    ></user-selector>
    <user-selector
      ref="handoverSAESelectorRef"
      @change="handoverSAESelectorChange"
      :dept-id="formData.handoverDeptId"
    ></user-selector>
    <user-selector
      ref="handoverSyntheticalSelectorRef"
      @change="handoverSyntheticalSelectorChange"
      :dept-id="formData.handoverDeptId"
    ></user-selector>
    <user-selector
      ref="handoverBuildSelectorRef"
      @change="handoverBuildSelectorChange"
      :dept-id="formData.handoverDeptId"
    >
    </user-selector>
    <user-selector
      ref="handoverEquipmentSelectorRef"
      @change="handoverEquipmentSelectorChange"
      :dept-id="formData.handoverDeptId"
    ></user-selector>
    <!-- <user-selector ref="handoverMainOperatorSelectorRef" @change="handoverMainOperatorSelectorChange"
			:dept-id="formData.handoverDeptId"></user-selector> -->
    <user-selector
      ref="handoverIpqcSelectorRef"
      @change="handoverIpqcSelectorChange"
      :dept-id="formData.handoverDeptId"
    ></user-selector>
    <takeover-class-selector
      ref="takeoverClassSelectorRef"
      @confirm="onTakeoverClassSelectorChange"
      title="选择接班班次"
      :date="formData.handoverClassTime"
      :item-id="formData.itemId"
      :class-id="formData.handoverClassId"
    ></takeover-class-selector>
    <takeover-dept-selector
      ref="deptSelectorRef"
      @confirm="onTakeoverDeptSelectorChange"
      title="选择接班班组"
      :date="formData.takeoverClassTime"
      :item-id="formData.itemId"
      :class-id="formData.takeoverClassId"
    ></takeover-dept-selector>
    <user-selector
      ref="takeoverUserSelectorRef"
      @change="takeoverUserSelectorChange"
      :dept-id="formData.takeoverDeptId"
    ></user-selector>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuDateTimePicker from '@/components/cu-date-time-picker/cu-date-time-picker.vue'
import CuShiftRuleSelect from '@/components/cu-shift-rule-select/cu-shift-rule-select.vue'
import UserSelector from '@/components/user-selector/index.vue'
import { addChangeShift, getTakeOverUser, getScheduledClass, getHandoverDept } from '@/api/duty-basic/duty-shifting.js'
import { getDutyUser } from '@/api/duty-basic/duty-meeting'
import CuUserSelector from '@/components/CuUserSelector/index.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import ItemSelector from '@/pages/work/duty-change-shifts/add-change-shifts/components/itemSelector.vue'
import HandoverClassSelector from '@/pages/work/duty-change-shifts/add-change-shifts/components/handoverClassSelector.vue'
import TakeoverClassSelector from '@/pages/work/duty-change-shifts/add-change-shifts/components/takeoverClassSelector.vue'
import TakeoverDeptSelector from '@/pages/work/duty-change-shifts/add-change-shifts/components/takeoverDeptSelector.vue'
import dayjs from 'dayjs'
import store from '@/store'

export default {
  name: 'AddChangeShifts',
  data() {
    return {
      scheduledClassList: [],
      deptId: store.getters.deptId,
      formData: {
        itemId: undefined,
        itemName: undefined,
        handoverTime: undefined, // 交班时间
        handoverBuildUserId: undefined, // 交班生产主办
        handoverBuildUserName: undefined,
        handoverEquipmentUserId: undefined, // 交班设备主办
        handoverEquipmentUserName: undefined,
        handoverOtherUser: [], // 交班其他人员array
        handoverOtherUserId: [], // 交班其他人员array
        handoverSafetyAndEnvironmentUserId: undefined, // 交班安全主办
        handoverSafetyAndEnvironmentUserName: undefined,
        handoverSyntheticalUserId: undefined, // 交班综合主办
        handoverSyntheticalUserName: undefined,
        takeoverUserId: undefined, // 接班班长
        takeoverUserName: undefined,
        handoverClassId: undefined, // 交班班次
        handoverClassName: undefined, // 交班班次
        takeoverDeptId: undefined, // 接班班组
        takeoverDeptName: undefined, // 接班班组，
        ipqcUserId: undefined, // 当班巡检用户ID
        ipqcUserName: undefined,
        mainOperatorUserId: [], // 当班主操用户ID,
        mainOperatorUser: [],
        mainOperatorUserName: undefined,
        handoverUserId: undefined, // 交班班长
        handoverUserName: undefined,
        takeoverClassId: undefined,
        takeoverClassName: undefined,
        takeoverDeptName: undefined,
        handoverDeptId: undefined,
        takeoverClassTime: undefined,
        handoverClassTime: undefined
      },
      rules: {
        handoverTime: {
          rules: [
            {
              required: true,
              errorMessage: '交接班时间不能为空'
            }
          ]
        },
        takeoverDeptId: {
          rules: [
            {
              required: true,
              errorMessage: '接班班组不能为空'
            }
          ]
        },
        takeoverClassId: {
          rules: [
            {
              required: true,
              errorMessage: '接班班次不能为空'
            }
          ]
        },
        takeoverUserId: {
          rules: [
            {
              required: true,
              errorMessage: '接班班长不能为空'
            }
          ]
        },
        ipqcUserId: {
          rules: [
            {
              required: true,
              errorMessage: '当班巡检不能为空'
            }
          ]
        },
        mainOperatorUser: {
          rules: [
            {
              required: true,
              errorMessage: '当班主操不能为空'
            }
          ]
        },

        handoverSafetyAndEnvironmentUserId: {
          rules: [
            {
              required: true,
              errorMessage: '安全主办不能为空'
            }
          ]
        },
        handoverSyntheticalUserId: {
          rules: [
            {
              required: true,
              errorMessage: '综合主办不能为空'
            }
          ]
        },
        handoverBuildUserId: {
          rules: [
            {
              required: true,
              errorMessage: '生产主办不能为空'
            }
          ]
        },
        handoverEquipmentUserId: {
          rules: [
            {
              required: true,
              errorMessage: '设备主办不能为空'
            }
          ]
        },
        itemId: {
          rules: [
            {
              required: true,
              errorMessage: '排班事项不能空'
            }
          ]
        },
        handoverClassId: {
          rules: [
            {
              required: true,
              errorMessage: '交班班次不能空'
            }
          ]
        },
        handoverUserId: {
          rules: [
            {
              required: true,
              errorMessage: '交班班长不能空'
            }
          ]
        }
      }
    }
  },
  methods: {
    onTakeoverDeptSelectorChange(obj) {
      this.formData.takeoverDeptName = obj.name
      this.formData.takeoverDeptId = obj.value
    },
    async getScheduledClassList() {
      const { data } = await getScheduledClass(
        dayjs(this.formData.handoverTime).format('YYYY-MM-DD'),
        this.formData.itemId
      )
      this.scheduledClassList = data
    },
    takeoverUserSelectorChange(obj) {
      this.formData.takeoverUserName = obj.name
      this.formData.takeoverUserId = obj.value
    },
    showTakeOverUserSelector() {
      if (!this.formData.takeoverDeptId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择接班班组'
        })
        return
      }
      this.$refs.takeoverUserSelectorRef.open()
    },
    onTakeoverClassSelectorChange(obj) {
      console.log(obj)
      this.formData.takeoverClassId = obj.value
      this.formData.takeoverClassName = obj.name
      this.formData.takeoverClassTime = obj.teamDate
    },
    showTakeOverClassSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.takeoverClassSelectorRef.open()
    },
    handoverBuildSelectorChange(obj) {
      console.log(obj)
      this.formData.handoverBuildUserId = obj.value
      this.formData.handoverBuildUserName = obj.name
    },
    showHandoverBuildSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverBuildSelectorRef.open()
    },
    handoverSyntheticalSelectorChange(obj) {
      console.log(obj)
      this.formData.handoverSyntheticalUserId = obj.value
      this.formData.handoverSyntheticalUserName = obj.name
    },
    showHandoverSyntheticalSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverSyntheticalSelectorRef.open()
    },
    handoverEquipmentSelectorChange(obj) {
      console.log(obj)
      this.formData.handoverEquipmentUserId = obj.value
      this.formData.handoverEquipmentUserName = obj.name
    },
    showHandoverEquipmentSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverEquipmentSelectorRef.open()
    },
    // handoverMainOperatorSelectorChange(obj) {
    // 	console.log(obj)
    // 	this.formData.mainOperatorUserId = obj.value
    // 	this.formData.mainOperatorUserName = obj.name
    // },
    showHandoverMainOperatorSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverMainOperatorSelectorRef.open()
    },
    handoverIpqcSelectorChange(obj) {
      console.log(obj)
      this.formData.ipqcUserId = obj.value
      this.formData.ipqcUserName = obj.name
    },
    showHandoverIpqcSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverIpqcSelectorRef.open()
    },
    handoverSAESelectorChange(obj) {
      console.log(obj)
      this.formData.handoverSafetyAndEnvironmentUserId = obj.value
      this.formData.handoverSafetyAndEnvironmentUserName = obj.name
    },
    showHandoverSAESelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverSAESelectorRef.open()
    },
    handoverUserSelectorChange(obj) {
      console.log(obj)
      this.formData.handoverUserId = obj.value
      this.formData.handoverUserName = obj.name
    },
    showHanderOverUserSelector() {
      if (!this.formData.handoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交班班次'
        })
        return
      }
      this.$refs.handoverUserSelectorRef.open()
    },
    onHandoverClassSelectorChange(obj) {
      this.formData.handoverClassName = obj.name
      this.formData.handoverClassId = obj.value
      this.formData.handoverClassTime = obj.teamDate
      if (this.formData.handoverClassId) {
        this.getHandoverDeptId()
      }
    },
    showHandoverClassSelector() {
      if (!this.formData.itemId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择排班事项'
        })
        return
      }
      this.$refs.handoverClassSelectorRef.open()
    },
    handleItemClick() {
      if (!this.formData.handoverTime) {
        uni.showToast({
          icon: 'none',
          title: '请先选择交接班时间'
        })
        return
      }
      this.$refs.itemSelectorRef.open()
    },
    onItemSelectorChange(obj) {
      console.log(obj)
      this.formData.itemId = obj.value
      this.formData.itemName = obj.name
      if (this.formData.itemId) {
        this.getScheduledClassList()
      }
    },
    onDeptSelectorChange(obj) {
      this.formData.takeoverDeptId = obj.value
      this.formData.takeoverDeptName = obj.name
    },
    handleDeptClick() {
      if (!this.formData.takeoverClassId) {
        uni.showToast({
          icon: 'none',
          title: '请先选择接班班次'
        })
        return
      }
      this.$refs.deptSelectorRef.open()
    },
    showhandoverTimePicker() {
      this.$refs.meegtingTimePicker.show()
    },
    handoverTimePickerChange(value) {
      this.formData.handoverTime = value
    },
    showCuShiftRuleSelect() {
      // if (!this.formData.takeoverDeptId) {
      // 	uni.showToast({
      // 		icon: 'none',
      // 		title: '请先选择班组',
      // 	})
      // 	return
      // }
      // this.$refs.shiftRuleSelectRef.query()
      // this.$refs.shiftRuleSelectRef.open()
    },
    handleShiftRuleSelectConfirm(data) {
      this.formData.shiftRuleDetailName = data.name
      this.formData.shiftRuleDetailId = data.value
    },
    getHandoverDeptId() {
      getHandoverDept(this.formData.handoverClassId, dayjs(this.formData.handoverClassTime).format('YYYY-MM-DD')).then(
        (res) => {
          this.formData.handoverDeptId = res.data.deptId
        }
      )
    },
    async handleSubmit() {
      await this.$refs.form.validate()
      uni.showModal({
        content: '提交后，填写的内容将不可以修改，请确定填写无误后再提交',
        confirmText: '确定',
        success: async (res) => {
          if (res.confirm) {
            this.formData.mainOperatorUserId = []
            console.log(this.formData.mainOperatorUserId)
            this.formData.handoverOtherUser.map((item) => {
              this.formData.handoverOtherUserId.push(item.userId)
            })
            this.formData.handoverOtherUserId = this.formData.handoverOtherUserId.join(',')
            this.formData.mainOperatorUser.map((item) => {
              this.formData.mainOperatorUserId.push(item.userId)
            })
            this.formData.mainOperatorUserId = this.formData.mainOperatorUserId.join(',')
            this.formData.mainOperatorUserIds = this.formData.mainOperatorUserId
            console.log(this.formData)
            await addChangeShift({
              ...this.formData,
              handoverTime: dayjs(this.formData.handoverTime).format('YYYY-MM-DDTHH:mm:ss')
            })
            uni.showToast({
              title: '提交成功！',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        }
      })
    },
    // 根据排班日期 班次 排班事项, 带出交班职能人员，并自动填充到表单反显
    async getDutyUserList() {
      const params = {
        itemId: this.formData.itemId,
        classId: this.formData.handoverClassId,
        teamDate: dayjs(this.formData.handoverClassTime).format('YYYY-MM-DD')
      }
      const { data = [] } = await getDutyUser(params)
      const buildUser = data.filter((item) => item.dutyName === '生产主办')?.[0] || {}
      this.formData.handoverBuildUserId = buildUser.userId
      this.formData.handoverBuildUserName = buildUser.userName
      const equipmentUser = data.filter((item) => item.dutyName === '设备主办')?.[0] || {}
      this.formData.handoverEquipmentUserId = equipmentUser.userId
      this.formData.handoverEquipmentUserName = equipmentUser.userName
      const safetyAndEnvironmentUser = data.filter((item) => item.dutyName === '安全主办')?.[0] || {}
      this.formData.handoverSafetyAndEnvironmentUserId = safetyAndEnvironmentUser.userId
      this.formData.handoverSafetyAndEnvironmentUserName = safetyAndEnvironmentUser.userName
      const syntheticalUser = data.filter((item) => item.dutyName === '综合主办')?.[0] || {}
      this.formData.handoverSyntheticalUserId = syntheticalUser.userId
      this.formData.handoverSyntheticalUserName = syntheticalUser.userName
      const user = data.filter((item) => item.dutyName === '交班班长')?.[0] || {}
      this.formData.handoverUserId = user.userId
      this.formData.handoverUserName = user.userName
      const ipqcUser = data.filter((item) => item.dutyName === '当班巡检')?.[0] || {}
      this.formData.ipqcUserId = ipqcUser.ipqcUserId
      this.formData.ipqcUserName = user.userName
    }
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.form.setRules(this.rules)
  },
  watch: {
    'formData.handoverTime'() {
      this.formData.itemId = ''
      this.formData.itemName = ''
    },
    'formData.itemId'() {
      this.formData.handoverClassId = ''
      this.formData.handoverClassName = ''
      this.formData.handoverDeptId = ''
    },
    'formData.handoverClassId'(val) {
      this.formData.handoverBuildUserId = ''
      this.formData.handoverBuildUserName = ''
      this.formData.handoverEquipmentUserId = ''
      this.formData.handoverEquipmentUserName = ''
      this.formData.ipqcUserId = ''
      this.formData.ipqcUserName = ''
      this.formData.mainOperatorUserId = []
      this.formData.mainOperatorUser = []
      this.formData.handoverSafetyAndEnvironmentUserId = ''
      this.formData.handoverSafetyAndEnvironmentUserName = ''
      this.formData.handoverSyntheticalUserId = ''
      this.formData.handoverSyntheticalUserName = ''
      this.formData.handoverUserId = ''
      this.formData.handoverUserName = ''
      this.formData.takeoverClassId = ''
      this.formData.takeoverClassName = ''
      this.formData.handoverOtherUser = []
      this.formData.handoverOtherUserId = []
      if (val) {
        this.getDutyUserList()
      }
    },
    'formData.takeoverClassId'(val) {
      this.formData.takeoverDeptId = ''
      this.formData.takeoverDeptName = ''
      // if (val) {
      // 	getTakeoverDept(this.formData.takeoverClassId, this.formData.itemId, dayjs(this.formData.handoverTime)
      // 		.format('YYYY-MM-DD')).then((res) => {
      // 		this.formData.takeoverDeptId = res.data.deptId
      // 		this.formData.takeoverDeptName = res.data.deptName
      // 	})
      // }
    },
    'formData.takeoverDeptId'(val) {
      this.formData.takeoverUserId = ''
      this.formData.takeoverUserName = ''
      if (val) {
        getTakeOverUser(
          this.formData.takeoverClassId,
          this.formData.takeoverDeptId,
          this.formData.itemId,
          dayjs(this.formData.takeoverClassTime).format('YYYY-MM-DD')
        ).then((res) => {
          this.formData.takeoverUserId = res.data.userId
          this.formData.takeoverUserName = res.data.name
        })
      }
    }
  },
  components: {
    CuCellGroup,
    CuCell,
    CuDateTimePicker,
    CuShiftRuleSelect,
    CuUserSelector,
    DeptSelector,
    ItemSelector,
    HandoverClassSelector,
    UserSelector,
    TakeoverClassSelector,
    TakeoverDeptSelector
  }
}
</script>

<style lang="scss" scoped>
.submit {
  width: 600rpx;
  height: 88rpx;
  background: #454a5e;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  opacity: 1;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 70rpx;
  margin-bottom: 70rpx;
}

.text-area {
  height: 300rpx;
}
</style>
